<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/jquery/jquery.min.js"></script>
		<script>
			!(function() {
				//邮箱验证规则
				let regEmail = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
				//密码验证规则
				let regPassword = /^[^\s]{6,18}$/;
				//验证码规则
				let regCodes = /^[a-zA-Z0-9]{6}$/;
				let imgCodesUrl = 'http://127.0.0.1:9588/verify/image_codes?time=';
				$(function() {
					
					nextCode();
					$('#codesImg').click(function() {
						nextCode();
					});
					//绑定登录
					$('#loginBtn').click(function() {
						login();
					});
				});
				//会员登录
				function login() {
					let email = $(':input[type="email"]').val();
					let password = $(':input[type="password"]').val();
					let codes = $(':input[type="text"]').val();
					//1.邮箱规则
					if ('' == email) {
						alertMessage('请输入邮箱');
						return;
					}
					if (!regEmail.test(email)) {
						alertMessage('邮箱格式错误');
						return;
					}
					//2.密码规则
					if ('' == password) {
						alertMessage('请输入密码');
						return;
					}
					if (!regPassword.test(password)) {
						alertMessage('密码为6-18个非空白字符');
						return;
					}
					//3.验证码规则
					if ('' == codes) {
						alertMessage('请输入验证码');
						return;
					}
					if (!regCodes.test(codes)) {
						alertMessage('验证码由6位大小写字母、数字组成');
						return;
					}
					$.ajax({
						url: 'http://127.0.0.1:9588/member/login',
						type: 'post',
						data: {
							email,
							password,
							codes
						},
						dataType: 'json',
						success: (responseData) => {
							if (200 != responseData.code) {
								nextCode();
								alertMessage(responseData.message);
								return;
							}
							//登录成功,保存用户信息
							let user = responseData.data;
							localStorage.setItem('user', user);
							success('登录成功,即将跳转首页', function() {
								window.location.href = 'index.html';
							});

						},
						error: () => {
							alertMessage('登录失败,请稍后再试');
						}
					});
				}
				/**
				 * 重新生成验证码
				 */
				function nextCode() {
					$('#codesImg').prop('src', imgCodesUrl + new Date());
				}
				/**警告
				 * @param {Object} message
				 */
				function alertMessage(message, fn) {
					$('#message').html(`&chi;${message}`).css({
						color: 'red'
					});
					$('#message').fadeToggle();
					$('#message').fadeToggle(2000, fn || function() {
						//清空错误信息
						$(this).empty();
					});
				}
				/**成功信息
				 * @param {Object} info
				 */
				function success(info, fn) {
					$('#message').html(`&radic;${info}`).css({
						color: 'blue'
					});
					$('#message').toggle();
					$('#message').toggle(1000, fn || function() {
						//清空错误信息
						$(this).empty();
					});
				}
			})();
		</script>
	</head>
	<body>
		<div>
			<div>
				<div class="logo"></div>
				<div><span><a href="#">首页</a></span></div>
			</div>
			<div class="form-container">
				<form action="#" method="post">
					<div><span>登录欣欣视频网</span></div>
					<div><input type="email" class="form-input" name="email" placeholder="电子邮件" /></div>
					<div><input type="password" class="form-input" placeholder="密码为6-18个非空白字符" name="password" id="password" />
					</div>
					<div><span style="color: #FF0000; font-size: 12px;"></span></div>
					<div><img id="codesImg" title="点击切换验证码" /></div>
					<div><input type="text" class="form-input" placeholder="验证码" /></div>
					<div><input type="button" class="action-btn" value="登录" id="loginBtn"></div>
					<div><span style="color: #adadad;">没有帐号</span><a href="#">免费注册</a> <a href="#">忘记密码</a></div>
					<div style="text-align: center;font-size: 13px;"><span id="message" style="display:none"></span></div>
				</form>
			</div>
			<div class="bottom">
				<div><span>Copyright</span><span>&copy;</span><span>2001-2025</span><span>欣欣视频网</span></div>
			</div>
		</div>
	</body>
</html>